<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: #f4f4f4;
        font-family: "Helvetica Neue", Helvetica, sans-serif;
      }

      .back {
        position: fixed;
        top: 0;
        width: 200%;
        height: 306px;
        transform: translate(-25%, -50px);
        border-radius: 0 0 60% 60%;
        background: #01b72f;
        overflow: hidden;
      }

      .back .header {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #fff;
        font-weight: 500;
        line-height: 39px;
      }

      .dateclock-wrapper {
        position: absolute;
        top: 32vh;
        padding: 0 26px;
        width: calc(100% - 26px * 2);
        height: 74px;
        box-sizing: content-box;
        display: flex;
      }

      .dateclock-inner {
        flex: 1;
        height: 52px;
        padding: 10px 20px 12px;
        border-radius: 3px;
        background: #fff;
        font-family: PingFangSC-Semibold, PingFang SC, "Helvetica Neue", Helvetica, sans-serif;

        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 55px;
        letter-spacing: 5px;
        overflow: hidden;
      }

      .time-wrap {
        align-self: flex-start;
        margin-top: -5px;
        position: relative;
        transition: 0.5s ease-in;
      }

      .time-wrap .item {
        height: 63px;
      }

      .colon {
        margin-top: -9px;
      }

      .date {
        font-size: 18px;
        line-height: 25px;
        font-weight: 500;
        color: #6c6c6c;
        text-align: center;
        position: absolute;
        width: 100%;
        top: 45vh;
      }

      .footer {
        position: fixed;
        bottom: 0;
        margin: 0 60px 55px;
        width: 255px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        border-radius: 22px;
        color: #2bc150;
        border: 1px solid #2bc150;
      }

      .mask {
        display: none !important;
        height: 100vh;
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        color: #aaa;
        font-size: 15px;
        opacity: 0.15;
      }

      .mask .item {
        width: 50%;
        transform: rotate(-10deg);
      }

      .wave-wrap {
        width: 750px;
        position: absolute;
        inset: 0;
        display: flex;
        animation: wave linear 4s infinite;
        filter: blur(1px);
      }

      .wave1,
      .wave2 {
        width: 100vw;
        margin-top: 20px;
      }

      .wave1 {
        transform: translate3d(0, 0px, 0px);
      }

      @keyframes wave {
        0%,
        50.00001% {
          transform: translateX(-25%);
        }

        50%,
        100% {
          transform: translateX(25%);
        }
      }
    </style>
  </head>
  <body>
    <div class="back">
      <div class="header">
        <div class="username">姓名：姚*</div>
        <div class="placename">河南大学新区站</div>
      </div>
      <div class="wave-wrap">
        <svg
          class="wave1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 750 528"
          width="750"
          height="528"
          preserveAspectRatio="xMidYMid meet"
          style="height: 100%; content-visibility: visible"
        >
          <defs>
            <clipPath id="__lottie_element_2">
              <rect width="750" height="528" x="0" y="0"></rect>
            </clipPath>
          </defs>
          <g clip-path="url(#__lottie_element_2)">
            <g transform="matrix(1,0,0,1,1029.136962890625,210)" opacity="1" style="display: block">
              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                <path
                  fill="rgb(244,244,244)"
                  fill-opacity="0.15"
                  d=" M-1075.875,112 C-1185.8819580078125,110.45099639892578 -1491.875,252 -1491.875,252 C-1491.875,252 -1305.875,362 -1305.875,362 C-1305.875,362 -359.875,374 -359.875,374 C-359.875,374 -119.875,264 -119.875,264 C-119.875,264 -119.875,116 -279.875,118 C-407.864990234375,119.5999984741211 -530.875,195 -699.875,198 C-863.8610229492188,200.91099548339844 -933.875,114 -1075.875,112z M-280.875,112 C-390.8819885253906,110.45099639892578 -696.875,252 -696.875,252 C-696.875,252 -510.875,362 -510.875,362 C-510.875,362 435.125,374 435.125,374 C435.125,374 675.125,264 675.125,264 C675.125,264 675.125,116 515.125,118 C387.135009765625,119.5999984741211 264.125,195 95.125,198 C-68.86100006103516,200.91099548339844 -138.875,114 -280.875,112z"
                ></path>
              </g>
            </g>
            <g transform="matrix(1,0,0,1,1467.614013671875,212)" opacity="1" style="display: block">
              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                  <path
                    fill="rgb(244,244,244)"
                    fill-opacity="0.12"
                    d=" M-1050.43798828125,124 C-1160.4449462890625,122.45099639892578 -1364.43798828125,228 -1364.43798828125,228 C-1364.43798828125,228 -1194.43798828125,354 -1194.43798828125,354 C-1194.43798828125,354 -136.43800354003906,330 -136.43800354003906,330 C-136.43800354003906,330 37.0620002746582,273 37.0620002746582,273 C37.0620002746582,273 -212.4250030517578,124 -372.43701171875,124 C-482,124 -558,195 -716.43798828125,200 C-826.0189819335938,203.45799255371094 -908.43798828125,126 -1050.43798828125,124z M-1729.43798828125,124 C-1839.4449462890625,122.45099639892578 -2043.43798828125,228 -2043.43798828125,228 C-2043.43798828125,228 -1873.43798828125,354 -1873.43798828125,354 C-1873.43798828125,354 -815.43798828125,330 -815.43798828125,330 C-815.43798828125,330 -641.93798828125,273 -641.93798828125,273 C-641.93798828125,273 -891.426025390625,124 -1051.43798828125,124 C-1161,124 -1237,195 -1395.43798828125,200 C-1505.01904296875,203.45799255371094 -1587.43798828125,126 -1729.43798828125,124z"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
        <svg
          class="wave2"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 750 528"
          width="750"
          height="528"
          preserveAspectRatio="xMidYMid meet"
          style="height: 100%; content-visibility: visible"
        >
          <defs>
            <clipPath id="__lottie_element_2">
              <rect width="750" height="528" x="0" y="0"></rect>
            </clipPath>
          </defs>
          <g clip-path="url(#__lottie_element_2)">
            <g transform="matrix(1,0,0,1,1029.136962890625,210)" opacity="1" style="display: block">
              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                <path
                  fill="rgb(244,244,244)"
                  fill-opacity="0.15"
                  d=" M-1075.875,112 C-1185.8819580078125,110.45099639892578 -1491.875,252 -1491.875,252 C-1491.875,252 -1305.875,362 -1305.875,362 C-1305.875,362 -359.875,374 -359.875,374 C-359.875,374 -119.875,264 -119.875,264 C-119.875,264 -119.875,116 -279.875,118 C-407.864990234375,119.5999984741211 -530.875,195 -699.875,198 C-863.8610229492188,200.91099548339844 -933.875,114 -1075.875,112z M-280.875,112 C-390.8819885253906,110.45099639892578 -696.875,252 -696.875,252 C-696.875,252 -510.875,362 -510.875,362 C-510.875,362 435.125,374 435.125,374 C435.125,374 675.125,264 675.125,264 C675.125,264 675.125,116 515.125,118 C387.135009765625,119.5999984741211 264.125,195 95.125,198 C-68.86100006103516,200.91099548339844 -138.875,114 -280.875,112z"
                ></path>
              </g>
            </g>
            <g transform="matrix(1,0,0,1,1467.614013671875,212)" opacity="1" style="display: block">
              <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                  <path
                    fill="rgb(244,244,244)"
                    fill-opacity="0.12"
                    d=" M-1050.43798828125,124 C-1160.4449462890625,122.45099639892578 -1364.43798828125,228 -1364.43798828125,228 C-1364.43798828125,228 -1194.43798828125,354 -1194.43798828125,354 C-1194.43798828125,354 -136.43800354003906,330 -136.43800354003906,330 C-136.43800354003906,330 37.0620002746582,273 37.0620002746582,273 C37.0620002746582,273 -212.4250030517578,124 -372.43701171875,124 C-482,124 -558,195 -716.43798828125,200 C-826.0189819335938,203.45799255371094 -908.43798828125,126 -1050.43798828125,124z M-1729.43798828125,124 C-1839.4449462890625,122.45099639892578 -2043.43798828125,228 -2043.43798828125,228 C-2043.43798828125,228 -1873.43798828125,354 -1873.43798828125,354 C-1873.43798828125,354 -815.43798828125,330 -815.43798828125,330 C-815.43798828125,330 -641.93798828125,273 -641.93798828125,273 C-641.93798828125,273 -891.426025390625,124 -1051.43798828125,124 C-1161,124 -1237,195 -1395.43798828125,200 C-1505.01904296875,203.45799255371094 -1587.43798828125,126 -1729.43798828125,124z"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </div>
    </div>

    <div class="dateclock-wrapper">
      <div class="dateclock-inner">
        <div class="time-wrap hour1">
          <div class="item">0</div>
          <div class="item">1</div>
          <div class="item">2</div>
        </div>
        <div class="time-wrap hour2">
          <div class="item">0</div>
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
          <div class="item">7</div>
          <div class="item">8</div>
          <div class="item">9</div>
        </div>
        <div class="colon">:</div>
        <div class="time-wrap minute1">
          <div class="item">0</div>
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
        </div>
        <div class="time-wrap minute2">
          <div class="item">0</div>
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
          <div class="item">7</div>
          <div class="item">8</div>
          <div class="item">9</div>
        </div>
        <div class="colon">:</div>
        <div class="time-wrap second1">
          <div class="item">0</div>
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
        </div>
        <div class="time-wrap second2">
          <div class="item">0</div>
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
          <div class="item">7</div>
          <div class="item">8</div>
          <div class="item">9</div>
        </div>
      </div>
    </div>

    <div class="date">2022年03月31日</div>

    <div class="footer">查看行程卡</div>

    <div class="mask">
      <div class="item">【郑州市新型冠状病毒感染的肺炎疫情防控领导小组办公室】</div>
      <div class="item">【郑州市新型冠状病毒感染的肺炎疫情防控领导小组办公室】</div>
      <div class="item">【郑州市新型冠状病毒感染的肺炎疫情防控领导小组办公室】</div>
    </div>
  </body>

  <script>
    function render() {
      let date = new Date("2020-09-09 03:04:20")
      date = new Date()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      let nums = {
        hour1: Math.floor(hour / 10),
        hour2: hour % 10,
        minute1: Math.floor(minute / 10),
        minute2: minute % 10,
        second1: Math.floor(second / 10),
        second2: second % 10,
      }

      Object.keys(nums).forEach(key => {
        document.querySelector(`.${key}`).style.top = nums[key] * -63 + "px"
      })
    }

    setInterval(() => {
      render()
    }, 1000)
  </script>
</html>
